<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    </meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </meta>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </meta>
    <title>Document</title>
</head>

<body>


    <script src="../js/jquery.3.5.1.js"></script>
    <script>
        function myAjax(obj) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHttpRequest");
            } else {
                console.warn('浏览器版本太低', err);
                return;
            }

            // 表示要不要异步执行操作。true为异步，false为同步
            var async = true;
            // HTTP 请求方法，有 GET /POST /PUT /DELETE 。默认为GET
            var type = "GET";
            // HTTP 请求的URL。默认为空。当为空时，直接返回null。
            var url = "";
            // 请求体，当请求方法未post，并且有请求体时，则使用该属性
            var data = "";
            // 用于响应HTTP访问认证请求的用户名
            var username = null;
            // 用于响应HTTP访问认证请求的密码
            var password = null;
            // 记录之后再执行的方法
            var afterFun = [];
            var fun = {
                url: function (param) {
                    url = param
                },
                type: function (param) {
                    type = param
                },
                async: function (param) {
                    async = param
                },
                // username: function (param) {
                //     username = param
                // },
                // password: function (param) {
                //     password = param
                // },
                // timeout: function (param) {
                //     // 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
                //     xhr.timeout = param
                // },
                // mimeType: function (param) {
                //     // 覆写由服务器返回的 MIME 类型。一个 DOMString 指定具体的MIME类型去代替有服务器指定的MIME类型. 如果服务器没有指定类型，那么 XMLHttpRequest 将会默认为 "text/xml".
                //     // 具体的类型可以参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
                //     xhr.overrideMimeType(param)
                // },
                // headers: function (param) {
                //     // 设置 HTTP 请求头的值。
                //     for (var value in param) {
                //         xhr.setRequestHeader(value, param[value]);
                //     }
                // },
                dataType: function (param) {
                    /* 
                    预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
                        在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
                    "xml": 返回 XML 文档，可用 jQuery 处理。
                    "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
                    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
                    "json": 返回 JSON 数据 。
                    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
                    "text": 返回纯文本字符串
                    */
                    switch (param) {
                        case "xml":
                        case "html":
                            xhr.responseType = "document";
                            break;
                        case "script":
                        case "text":
                            xhr.responseType = "text";
                            break;
                        case "json":
                            xhr.responseType = "json";
                            break;
                        default:
                            xhr.responseType = param;
                            break;
                    }
                },
                // contentType: function (param) {
                //     // 发送信息至服务器时内容编码类型。(默认: "application/x-www-form-urlencoded")
                //     xhr.setRequestHeader("Content-Type", param);
                // },
                param: function (param) {
                    // url后面拼接的参数
                    if (url) {
                        afterFun.push("param")
                        return;
                    }
                    if (Object.keys(param).length > 0) {
                        console.log("url!!!", url)
                        if (url.indexOf("?") == -1) {
                            url += "?";
                        } else {
                            url += "&";
                        }
                        for (let value in param) {
                            url += value + "=" + param[value] + "&";
                        }
                        url = url.substring(0, url.length - 1)
                    }
                },
                // data: function (param) {
                //     if (type.toUpperCase() != "POST".toUpperCase()) {
                //         afterFun.push("data")
                //         return;
                //     }
                //     for (let value in param) {
                //         data += value + "=" + param[value] + "&";
                //     }
                //     if (Object.keys(param).length != 0) {
                //         data = data.substring(0, url.length - 1)
                //     }
                // }
            }

            xhr.open(type, url, async, username, password);

            // 设置默认值
            xhr.responseType = "";

            // 标识，用于判断是否符合请求规则，不符合则直接退出
            var flag = false;
            for (var value in obj) {
                !!fun[value] ?
                    fun[value](obj[value]) :
                    (xhr[value] = obj[value]);

                if (flag) return;
            }

            if (afterFun.length != 0) {
                afterFun.forEach(function (value, index) {
                    fun[value](obj[value])
                })
            }

            if (data) {
                xhr.send(data);
            } else {
                xhr.send();
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        // console.log(xhr.status)  // 状态码
                        // console.log(xhr.statusText) // 状态字符串
                        // console.log(xhr.getAllResponseHeaders()) // 所有响应头
                        // console.log(xhr.response)   // 响应体
                        obj["success"] ? obj["success"](xhr.response, xhr.status) : "console.log(xhr.response)";
                    } else {
                        obj["error"] ? obj["error"](xhr.response, xhr.status) : "console.log(xhr.response)";
                    }
                }
            }
        }

        myAjax({
            url: "http://127.0.0.1:8088/server",
            dataType: "text",
            // param: {
            //     ane: "jj",
            //     dj: 33
            // },
            success: function (data, status) {
                console.log("!!!!!!!!@~~~~", data, status);
            }
        })

    </script>
</body>

</html>